<script setup lang="ts">
import { reactive, onMounted } from 'vue';
import dayjs from 'dayjs';
import { navigateTo } from '@tarojs/taro';
import { QUERY_ALARM_LIST_BY_USER } from '/@/api/modules/base/alarm';
import { appEvents } from '/@/utils/events';

const state = reactive<{
  /**
   * 当前页
   */
  activePage: number;
  /**
   * 加载状态
   */
  loading: boolean;
  /**
   * 加载完成状态
   */
  finished: boolean;
  /**
   * 列表
   */
  list: AppMessageAlarm.Dto[];
}>({
  activePage: 1,
  loading: false,
  finished: false,
  list: [],
});

/**
 * @description 列表查询
 * @param {Number} page -当前页
 * @param {Number} pageSize -每页条数
 */
function queryList(page: number = 1, pageSize: number = 15) {
  if (!page && state.finished) return;
  state.loading = true;

  QUERY_ALARM_LIST_BY_USER({
    comQuery: { page, pageSize },
  })
    .then((res) => {
      state.loading = false;

      if (
        state.activePage >=
        (res.comQuery.pageCount ||
          (res.comQuery.totalCount as number) / (res.comQuery.pageSize as number) ||
          1)
      )
        state.finished = true;
      if (!res.content || !res.content.length) return;

      res.content.forEach((item) => state.list.push(item));

      state.activePage += 1;
    })
    .catch(() => {
      state.loading = false;
    });
}

/**
 * @function 加载
 */
function onLoading() {
  if (state.finished) return;

  queryList(state.activePage);
}

onMounted(() => {
  state.activePage = 1;
  state.loading = true;
  state.finished = false;
  state.list = [];
  onLoading();

  appEvents.on('alarmItemRead', ({ id }) => {
    state.list[
      state.list.findIndex((item) => {
        return item.id === id;
      })
    ].isRead = 1;
  });
});
</script>

<template>
  <view class="alarm-list app-page--1">
    <app-navbar title="告警列表" />
    <scroll-view
      class="app-page__wrapper"
      :scroll-y="true"
      :lower-threshold="100"
      @scrolltolower="onLoading()"
    >
      <view class="alarm-list__wrapper">
        <view
          v-for="item in state.list"
          :key="item.id as string"
          class="alarm-item"
          @click="
            navigateTo({
              url: `/pages/alarm/detail/index?id=${item.id}`,
            })
          "
        >
          <view class="alarm-item__header-wrapper">
            <text class="alarm-item__type-name">{{ item.alarmTypeName || '-' }}</text>
            <!-- <text
              class="alarm-item__resolve-state"
              :class="{ success: item.alarmResolveState === 2 }"
            >
              {{
                item.alarmResolveState ? { 1: '未处理', 2: '已处理' }[item.alarmResolveState] : '-'
              }}
            </text> -->
            <view class="alarm-item__level-name-wrapper">
              <nut-tag
                :type="{ 1: 'primary', 2: 'warning', 3: 'danger' }[item.alarmLevelId || 1] as 'primary' | 'warning' | 'danger'"
              >
                {{ item.alarmLevelName }}
              </nut-tag>
            </view>
          </view>
          <view class="alarm-item__detail">
            <view class="alarm-item__detail--left">{{ item.alarmDetail || '-' }}</view>
            <view v-if="item.isRead === 2" class="alarm-item__detail--right">
              <view class="alarm-item__no-read-dot"></view>
            </view>
          </view>
          <view class="alarm-item__time">
            <text>告警时间:&nbsp;&nbsp;</text>
            <text>
              {{
                item.alarmTime ? dayjs(Number(item.alarmTime)).format('YYYY-MM-DD HH:mm:ss') : '-'
              }}
            </text>
          </view>
          <view class="alarm-item__position">
            <text>告警地点:&nbsp;&nbsp;{{ item.areaName || '-' }}</text>
          </view>
        </view>
      </view>

      <view class="app-page__list-tips">
        <text v-if="!state.list.length">暂无数据！</text>
        <text v-else-if="state.list.length && state.loading">加载中...</text>
        <text v-else-if="state.list.length && state.finished">加载完成!</text>
      </view>
    </scroll-view>
  </view>
</template>

<style lang="scss">
@import './index.scss';
</style>
